@extends('admin.common.main')

@section('cnt')
    <nav class="breadcrumb">
        <i class="Hui-iconfont">&#xe67f;</i> 首页
        <span class="c-gray en">&gt;</span> 文章中心
        <span class="c-gray en">&gt;</span> 文章列表
        <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a>
    </nav>
    {{--消息提示--}}
    @include('admin.common.success')

    <div class="page-container">
        <form method="get" class="text-c" onsubmit="return dopost()">
            <input type="text" onfocus="WdatePicker({ maxDate:'#F{$dp.$D(\'datemax\')||\'%y-%M-%d\'}' })" id="datemin" class="input-text Wdate" style="width:120px;">
            -
            <input type="text" onfocus="WdatePicker({ minDate:'#F{$dp.$D(\'datemin\')}',maxDate:'%y-%M-%d' })" id="datemax" class="input-text Wdate" style="width:120px;">
            文章标题：
            <input type="text" class="input-text" style="width:250px" placeholder="文章名" value="{{ request()->get('title') }}" id="title" autocomplete="off">
            <button type="submit" class="btn btn-success radius" id="" name=""><i class="Hui-iconfont">&#xe665;</i> 搜索文章</button>
        </form>
        <div class="cl pd-5 bg-1 bk-gray mt-20">
        <span class="l">
            <a href="{{ route('admin.article.create') }}" class="btn btn-primary radius">
                <i class="Hui-iconfont">&#xe600;</i> 添加文章
            </a></span>
            <span class="r">共有数据：<strong>88</strong> 条</span>
        </div>
        <div class="mt-20">
            <table class="table table-border table-bordered table-hover table-bg table-sort" id="mytable">
                <thead>
                <tr class="text-c">
                    <th width="80">ID</th>
                    <th width="100">文章标题</th>
                    <th width="130">加入时间</th>
                    <th width="100">操作(用访问器实现)</th>
                    <th width="100">操作(用回调实现)</th>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>

        </div>
    </div>
@endsection

@section('js')
<script>
    var dataTable = $('#mytable').DataTable({
        lengthMenu:[5,8,15,20,100], //设置每页显示条数
        searching: false, //隐藏搜索栏
        columnDefs:[
            {targets:[3], orderable: false}//第四列（操作）不进行排序
        ],
        //开启服务器端分页(ajax)
        serverSide: true,
        //进行ajax请求
        ajax: {
            url: "{{ route('admin.article.index') }}",
            type: 'GET',
            //参数
            data: function(ret) {
                ret.datemin = $('#datemin').val()
                ret.datemax = $('#datemax').val()
                ret.title =  $.trim($('#title').val())
            }
            //头信息laravel post请求时csrf
            {{--headers: {'X-CSRF-TOKEN' : '{{ csrf_token() }}'},--}}
            // data: { }
        },
        columns: [
            {'data': 'id', 'defaultContent': '', 'className': 'text-c'},
            {'data': 'title', 'defaultContent': '', 'className': 'text-c'},
            {'data': 'created_at', 'defaultContent': '', 'className': ''},
            {'data': 'opts', 'defaultContent': '默认值', 'className': ''}, //opts走getOptsAttribute
            {'data': 'opts_by_callback', 'defaultContent': '用createdRow回调实现', 'className': ''},
        ],
        //回调方法
        //row当前行的dom对象
        //当前行的数据
        //当前行的索引
        //缺点，这里没考虑权限问题。比操作(用访问器实现)差，如果要加上权限访问控制，就很麻烦，要用js代码判断很多。能用php来判断最好。
        createdRow: function (row, data, dataIndex) {
            //当前id
            var id = data.id;
            //行的最后一列
            var td = $(row).find('td:last-child');
            //显示的html内容
            var html = `
                <a href="/admin/article/${id}/edit" class="label label-secondary radius ">修改</a>
                <a href="/admin/article/${id}" class="label label-warning radius" onclick="return delArticle(event, this)">删除</a>
            `;
            //html添加到td中
            td.html(html);
        }
    });

    //搜索文章表单提交
    function dopost() {
        //用DataTables来发送ajax请求get
        //手动调用一次DataTables插件请求
        dataTable.ajax.reload()
        //取消表单默认行为
        return false;
    }

    //删除文章
    function delArticle2(evt, obj) {
        //请求的url地址
        let url = $(obj).attr('href');
        //发起ajax
        //IE11以上才有fetch 原生的
        fetch(url, {
            method: 'delete',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body:'aa=bb&id=1'
        }).then(res=>{
            return res.json();
        }).then(data=>{
            console.log(data)
        });

        //取消默认行为
        return false;
    }

    //最终写法
    async function delArticle(evt, obj) {
        evt.preventDefault();
        //请求的url地址
        let url = $(obj).attr('href');
        //发起ajax
        //IE11以上才有fetch 原生的
        let ret = await fetch(url, {
            method: 'delete',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body:'aa=bb&id=1'
        });
        let json = await ret.json();
        console.log(json)


        //取消默认行为
        return false;
    }
</script>
@endsection
